/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Radio,
  Alert,
  Select,
  Cascader
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14
  }
};

class AddFrom extends PureComponent {
  render() {
    const {
      formData,
      form: { getFieldDecorator, getFieldValue },
      modalType,
      personList,
      groupList
    } = this.props;

    return (
      <Form >
        <Row style={{ display: modalType === 0 ? 'block' : 'none' }}>
          <Alert message="批量指定试机任务，可以指派到班组或者个人。指派到个人时：只有被指派人可以编辑数据，其他人只能查看；指派到班组时，班组内的成员都可以编辑数据。" type="info" showIcon />
        </Row>
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'指派类型'}>
              {getFieldDecorator('type', {
                initialValue: 2,
                rules: [
                  {
                    required: true,
                    message: '请选择指派类型'
                  }
                ]
              })(<Radio.Group>
                <Radio value={1}>
                  个人
                </Radio>
                <Radio value={2}>
                  班组
                </Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col span={24} style={{ display: getFieldValue('type') === 2 ? 'block' : 'none' }}>
            <FormItem {...formItemLayout} label={'班组'}>
              {getFieldDecorator('testMachineGroup', {
                initialValue: formData.testMachineGroup || undefined,
                rules: [
                  {
                    required: getFieldValue('type') === 2 ? true : false,
                    message: '请选择班组'
                  }
                ]
              })(<Select
                placeholder='请选择班组'
                allowClear
                showSearch
                labelInValue
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                {groupList && groupList.map(item => <Option key={item.groupCode}>{item.groupName}</Option>)}
              </Select>)}
            </FormItem>
          </Col>
          <Col span={24} style={{ display: getFieldValue('type') === 1 ? 'block' : 'none' }}>
            <FormItem {...formItemLayout} label={'个人'}>
              {getFieldDecorator('testMachinePerson', {
                initialValue: formData.testMachinePerson || undefined,
                rules: [
                  {
                    required: getFieldValue('type') === 1 ? true : false,
                    message: '请选择个人'
                  }
                ]
              })(<Select
                placeholder='请选择个人'
                allowClear
                showSearch
                labelInValue
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                {personList && personList.map(item => <Option key={item.userId}>{item.userName}</Option>)}
              </Select>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default Form.create()(AddFrom);
